<template>

<el-container class="shouye">
<el-aside width="200px">
<el-menu
default-active="/index/home/hwj/homepage"
@select="handleSelect"
>
<!-- <el-menu-item index="/index/register">
<el-icon><Edit /></el-icon>
<span>注册</span>
</el-menu-item>

<el-menu-item index="/index/login">
<el-icon><Edit /></el-icon>
<span>登录</span>
</el-menu-item> -->

<el-menu-item index="/index/home/hwj/homepage">
<el-icon><Edit /></el-icon>
<span>
   <span class="iconfont icon-shouyeshouye"></span>
  首页
  </span>
</el-menu-item>

<!-- 左侧垂直下拉菜单 -->
<el-row class="tac">
    <el-col :span="12">
      <!-- <h5 class="mb-2">Default colors</h5> -->
      <el-menu
       router
        default-active="/index/home"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="/index/home/zqq/employees">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->


            <span>用户管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/index/home/zqq/employees">创建用户</el-menu-item>
            <el-menu-item index="1-2">用户授权</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

           <el-sub-menu index="2">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>信息管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="2-1">创建信息</el-menu-item>
            <el-menu-item index="2-2">编辑信息</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

           <el-sub-menu index="/index/home/hwj/business">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>商机管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/index/home/hwj/business">创建商机</el-menu-item>
            <el-menu-item index="/index/home/hwj/businessedit">编辑商机</el-menu-item>
             <el-menu-item index="/index/home/hwj/businessdetails">商机详情</el-menu-item>
              <el-menu-item index="/index/home/hwj/searchbusiness">搜索商机</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

           <el-sub-menu index="4">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>合同管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="4-1">创建合同</el-menu-item>
            <el-menu-item index="4-2">编辑合同</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

           <el-sub-menu index="5">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>售后管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="5-1">创建售后日志</el-menu-item>
            <el-menu-item index="5-2">编辑售后日志</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

           <el-sub-menu index="6">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>产品管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="6-1">创建产品</el-menu-item>
            <el-menu-item index="6-2">编辑产品</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

      <el-sub-menu index="7">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>员工管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="7-1">创建员工</el-menu-item>
            <el-menu-item index="7-2">编辑员工</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

            <el-sub-menu index="8">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>系统日志</span>
          </template>
          <el-menu-item-group >
          
            <el-menu-item index="/index/home/zqq/logs">搜索系统日志</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>


      
        
      </el-menu>
    </el-col>
  
  </el-row>
</el-menu>
</el-aside>
<el-main>
  <!-- 渲染二级路由出口 -->
<router-view></router-view>
</el-main>

     

</el-container>


</template>

<script setup>

import { useRouter } from 'vue-router'
var router = useRouter()
//点击菜单项的回调, 通过参数path可以获取所点击的菜单项的index属性的值
var handleSelect = (path)=>{
  router.push(path);
}


</script>

<style>

.el-col{
  max-width: 200px !important;
}
.el-header .el-menu[data-v-8901ba02]{
  width: 100%;
}
.shouye span{
  display: inline-block;
  font-size: 20px;
}
.tac {
  width: 100%;
}
.tac span{
  display: inline-block;
  font-size: 20px;
  font-family:'Times New Roman', Times, serif;
  font-weight: bolder;
}
ul li{
   font-size: 32px;
  /* font-family:'Times New Roman', Times, serif; */
  /* font-weight: bolder; */
}

</style>